<template>
  <div class="page-card cooperation">
    <h-query :showKey="['startTime,endTime']" :query="query" @search="search">
      <!-- <h-tooltip slot="btn" title="更新状态没用" /> -->
      <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">下发账号</a-button>
    </h-query>
    <h-table ref="htable" @init="getList" :config="config" @changeStatus="changeStatus">
      <span slot="action" slot-scope="{text, record}">
        <a class="red" @click="remove(record)">删除</a>
        <a-divider type="vertical"></a-divider>
        <a @click="edit(record)">编辑</a>
      </span>
    </h-table>

    <h-modal v-model="show" title="区县市网信办账号下发" @submit="submit">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-row :gutter="80">
          <a-col :span="12" v-if="type =='add'">
            <a-form-model-item label="登录账号" prop="username">
              <a-input size="large" :maxLength="50" v-model="form.username" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="密码" prop="password">
              <a-input type="password" size="large" :maxLength="50" v-model="form.password" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="区域" prop="address">
              <a-select v-model="form.address" size="large" placeholder="请输入" @change="changeAddress">
                <a-select-option v-for="item in address" :value="item.id" :key="item.id">{{ item.title }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属部门" prop="departId">
              <a-select v-model="form.departId" size="large" placeholder="请输入" @change="change">
                <a-select-option v-for="item in dept" :value="item.id" :key="item.id">{{ item.depart }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="姓名" prop="realname">
              <a-input size="large" v-model="form.realname" placeholder="请输入姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="手机号" prop="mobile">
              <a-input size="large" v-model="form.mobile" placeholder="请输入手机号" />
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </h-modal>
  </div>
</template>
<script>
import { cooperation, address, dept, addAccount, deleteAccount, cooperationStatus, editsAccount } from '@/api/serve';
import { getIsOutDepart } from '@/api/dept';
import cloneDeep from 'lodash/cloneDeep';

const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/;

export default {
  name: 'Cooperation',
  inject: ['refresh'],
  data() {
    function validator(rule, value, callback) {
        if (!value) {
            callback(new Error('密码不能为空！'));
        } else if (!reg.test(value)) {
            callback(new Error('密码必须8-16位且包含数字，大写字母，小写字母，特殊字符中的任意三种！'));
        } else {
            callback();
        }
    }
    return {
      departId: '',
      type: 'add',
      query: [
        {
          key: 'depart',
          label: '部门',
          type: 'select',
          options: [

          ]
        },
        {
          key: 'realname',
          label: '姓名',
          type: 'input'
        }
      ],
      config: {
        rowKey: 'id',
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '账号',
            dataIndex: 'username'
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'realname'
          },
          {
            align: 'center',
            title: '手机号',
            dataIndex: 'mobile'
          },
          // {
          //   align: 'center',
          //   title: '密码',
          //   dataIndex: 'password'
          // },
          {
            align: 'center',
            title: '下发时间',
            dataIndex: 'createTime'
          },
          {
            align: 'center',
            title: '区域',
            dataIndex: 'title'
          },
          {
            align: 'center',
            title: '部门',
            dataIndex: 'depart'
          },
          {
            align: 'center',
            title: '状态',
            dataIndex: 'status',
            scopedSlots: { customRender: 'statusSlide' }
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100
        }
      },
      form: {
        roleId: ''
      },
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isOut: 0,
        depart: ''
      },
      address: [],
      dept: [],
      rules: {
        username: [{ required: true, message: '请输入' }],
        password: [{ required: true, validator }],
        departId: [{ required: true, message: '请输入' }],
        realname: [{ required: true, message: '请输入' }],
        mobile: [{ required: true, message: '请输入' }]
      }
    };
  },
  created() {
    this.queryParams.isOut = this.$route.query.isOut || 0;
    if (this.queryParams.isOut == '0') {
      this.form.roleId = '5851392788477616525';
    } else if (this.queryParams.isOut == '1') {
      this.form.roleId = '5951392788477616525';
    }

    this.getAddress();
    this.getIsOutDepart();
  },
  methods: {
    getIsOutDepart() {
      getIsOutDepart({
        isOut: this.queryParams.isOut
      }).then(res => {
        this.query[0].options = [{
          label: '全部',
          value: ''
        }].concat(res.data.map(e => {
          return {
            label: e.depart,
            value: e.id
          };
        }));
      });
    },
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      cooperation(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e,
            status: !e.status
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    },
    getDept(id) {
      dept({
        address: id,
        isOut: this.queryParams.isOut
      }).then(res => {
        this.dept = res.data;
      });
    },
    changeAddress(e) {
      this.getDept(e);
    },
    changeStatus({ id, status }) {
      cooperationStatus({
        id,
        status: status ? 0 : 1
      }).then(res => {
        this.$message.success(res.msg);
        this.$refs.htable.refresh(true);
      });
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确定要删除吗？',
        onOk() {
          deleteAccount({
            id,
            isDelete: -1
          }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        }
      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    add() {
      this.show = true;
      this.type = 'add';
      this.form = {
        roleId: this.form.roleId
      };
    },
    edit(record) {
      this.type = 'edit';
      this.show = true;
      this.form = record;
      this.departId = record.departId;
      const address = this.address.find(e => e.title == this.form.title);
      if (address) {
        this.form.address = address.id;
        this.getDept(record.id);
        this.form.departId = record.depart;
      }
      console.log(this.form);
    },
    change(e) {
      this.departId = e;
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addAccount(this.form).then(res => {
              this.$message.success('创建成功');
              this.show = false;
              this.form = cloneDeep({});
              this.$refs.htable.refresh();
            });
          } else if (this.type == 'edit') {
            const { username, password, id, address } = this.form;
            editsAccount({ username, password, id, departId: this.departId, address }).then(res => {
              this.$message.success('编辑成功');
              this.show = false;
              this.form = cloneDeep({});
              this.$refs.htable.refresh();
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .cooperation {
    background: #fff;

  }
</style>
